<template>
	<view>
		<view class="nav" v-if="list.length > 0">
			<uni-nav-bar :statusBar="true" :border="false" :fixed="false" leftIcon="back" @clickLeft="$tab.back()"
				:title="`我的${list[0].moneyName}`" background-color="transparent" color="#FFF" />

			<view class="flex items-center justify-between px-32"
				style="height: calc(100% - var(--status-bar-height) - 44px)" v-if="list.length > 0">
				<view class="text-FFF">
					<view class="text-48 font-700">
						{{list[0].amount}}
					</view>
					<view class="mt-8">
						我的{{list[0].moneyName}}
					</view>
					<view class="mt-32 " v-if="type == 2">
						冻结金积分自获得日起，有效期为30天
					</view>

					<div class="flex items-center mt-32" style="gap:20rpx;">
						<view class="nav-btn btn2 text-center" v-if="list[0].moneyConfig.isWithdraw == 1"
							@click="$tab.nav(`/pages/mine/withdraw/index?moneyId=${list[0].moneyId}`)">
							去提现
						</view>
						
						<view class="nav-btn btn3 text-center" v-if="list[0].moneyConfig.isSend == 1"
							@click="$tab.nav(`/pages/mine/currency/conversion?currencyId=${list[0].moneyId}&title=${list[0].moneyName}&alway=${list[0].amount}`)">
							转赠
						</view>
					</div>
				</view>
			</view>
		</view>

		<view class="" style="height: 382rpx;">

		</view>

		<view class="px-20">
			<view class="py-32 text-32">
				明细
			</view>

			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
				<view class="" v-for="(item,index) in detailList" :key="index">
					<view class="item">
						<view class="flex justify-between items-center">
							<text class="text-28 font-700">{{item.useRemark}}</text>
							<text class="text-36" :style="{color:item.payment==1 ? '#02CE8A' : '#FF912A'}">
								{{item.payment==1 ? '+'+item.amount : '-'+item.amount}}
							</text>
						</view>
						<view class="flex justify-between items-center mt-20">
							<text class="text-24 text-gray">{{item.createTime}}</text>
							<text class="text-24 text-gray">余额：{{item.balance}}</text>
						</view>
					</view>
					<u-divider></u-divider>
				</view>
			</s-pull-scroll>
		</view>



		<u-loading-page :loading="loading"
			image="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/loading.gif" icon-size="100"
			loading-text=" " loading-mode="spinner"></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				loading: false,
				detailList: [],
				type: 0
			};
		},
		onLoad(e) {
			this.type = e.type
		},
		onShow() {
			this.getData()
		},
		methods: {
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.detailList = [];
					}

					const res = await this.$Api.user.lncomeList({
						moneyId: this.list[0].moneyId,
						pageSize: 10,
						pageNum: pullScroll.page
					})

					console.log(res, '货币记录')

					this.detailList = this.detailList.concat(res.rows || []);
					if (this.detailList.length == 0) {
						pullScroll.empty()
					}

					if (this.detailList.length >= res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			},
			async getData() {
				const userRichInfo = await this.$Api.user.userRichInfo()
				this.list = userRichInfo.data.filter(item => {
					if (this.type == 1) {
						return item.moneyId == "9"
					}
					if (this.type == 2) {
						return item.moneyId == "10"
					}
					if (this.type == 3) {
						return item.moneyId == "14"
					}
					if (this.type == 4) {
						return item.moneyId == "15"
					}
				})
				this.refresh()
			},
		}
	}
</script>

<style lang="scss">
	.nav {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
		width: 100%;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/money-bg.png) no-repeat;
		background-size: 100% 100%;
		height: 382rpx;

		.nav-btn {
			width: 160rpx;
			height: 64rpx;
			line-height: 64rpx;
		}

		.btn1 {
			background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/btn-bg1.png) no-repeat;
			background-size: 100% 100%;
		}

		.btn2 {
			background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/btn-bg2.png) no-repeat;
			background-size: 100% 100%;
		}
		
		.btn3 {
			background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/btn-bg3.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.box-1 {
		width: 178rpx;
		height: 80rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		line-height: 80rpx;
		min-width: 178rpx;
	}
</style>